import React, { useEffect, useState } from "react";
import { Descriptions, Card, Button } from "antd";
//api
import { getHosListShowRequest } from "@api/hospital/hospitalList";
//type
import type { hospitalDetailReturnType } from "@api/hospital/model/hospitalList";
import { Navigate, useNavigate, useParams } from "react-router-dom";
export default function HospitalShow() {
  //拿到id
  const { id } = useParams();
  //编程式路由
  const Navigate = useNavigate();
  //设置医院展示初始值
  const [hosShow, setHosShow] = useState<hospitalDetailReturnType>({});
  //初始化请求医院展示
  useEffect(() => {
    const getHosListShow = async () => {
      const value = await getHosListShowRequest(id as string);
      setHosShow(value);
    };
    getHosListShow();
  }, []);
  return (
    <Card>
      <Descriptions title="基本信息" bordered column={2}>
        <Descriptions.Item label="医院logo" style={{ width: "100px" }}>
          {hosShow.hospital?.logoData ? (
            <img
              src={`data:image/jpeg;base64,${hosShow.hospital?.logoData}`}
              alt=""
            ></img>
          ) : (
            ""
          )}
        </Descriptions.Item>
        <Descriptions.Item label="医院名称">
          {hosShow.hospital?.hosname}
        </Descriptions.Item>
        <Descriptions.Item label="医院编码">
          {hosShow.hospital?.hoscode}
        </Descriptions.Item>
        <Descriptions.Item label="医院地址">
          {hosShow.hospital?.param.fullAddress}
        </Descriptions.Item>
        <Descriptions.Item label="坐车路线" span={2}>
          {hosShow.hospital?.route}
        </Descriptions.Item>
        <Descriptions.Item label="医院介绍" span={2}>
          {hosShow.hospital?.intro}
        </Descriptions.Item>
      </Descriptions>
      <Descriptions
        title="预约信息"
        bordered
        column={2}
        style={{ marginTop: "30px" }}
      >
        <Descriptions.Item label="预约周期">
          {hosShow.bookingRule?.cycle}
        </Descriptions.Item>
        <Descriptions.Item label="放号时间">
          {hosShow.bookingRule?.releaseTime}
        </Descriptions.Item>
        <Descriptions.Item label="停挂时间">
          {hosShow.bookingRule?.stopTime}
        </Descriptions.Item>
        <Descriptions.Item label="退号时间">
          {hosShow.bookingRule?.quitTime}
        </Descriptions.Item>
        <Descriptions.Item label="预约规则" span={2}>
          {hosShow.bookingRule?.rule.map((item: string, index: number) => {
            return <p key={index}>{item}</p>;
          })}
        </Descriptions.Item>
      </Descriptions>
      <Button style={{ marginTop: "30px" }} onClick={() => Navigate(-1)}>
        返回
      </Button>
    </Card>
  );
}
